<template>
  <div class="nav-all">
    <div class="nav-con">
      <div class="nav-span">
        <span>标题：</span>
      </div>
      <input type="text" v-model="title" />
    </div>
    <div class="nav-con">
      <div class="nav-span">
        <span>标题样式：</span>
      </div>

      <div class="nav-spot">
        <el-radio v-model="navobj.sty" label="1">默认</el-radio>
        <el-radio v-model="navobj.sty" label="2">自定义</el-radio>
      </div>
    </div>
    <div v-show="showTextSty">
      <div class="nav-con-size">
        <div class="nav-span">
          <span>字号：</span>
        </div>

        <el-dropdown @command="setTextSize">
          <div class="set-opaq">
            <span>{{textSize}}</span>
            <div class="set-opaq-right">
              <i class="el-icon-arrow-down"></i>
            </div>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="item" v-for="(item, idx) in sizeData" :key="idx">{{item}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="nav-con-size">
        <div class="nav-span">
          <span>样式：</span>
        </div>

        <div class="text-icon">
          <template v-for="(item, idx) in textStyel">
            <svg-icon
              @click="setNavStyle(idx)"
              :key="idx"
              :icon-class="item.status ?  item.checkicon:item.uncheckicon"
            ></svg-icon>
          </template>
        </div>
      </div>
      <div class="nav-con">
        <div class="nav-span">
          <span>底色：</span>
        </div>

        <el-color-picker
          class="mycolor"
          size="small"
          style="width:220px;margin-left: 8px;"
          v-model="navobj.color"
          show-alpha
        ></el-color-picker>
      </div>
      <div class="nav-con">
        <div class="nav-span">
          <span>阴影：</span>
        </div>
        <el-color-picker
          class="mycolor"
          size="small"
          v-model="shadow"
          show-alpha
          :predefine="navobj.predefineColors"
          style="margin-left: 9px;"
        ></el-color-picker>
        <div class="xycon">
          x轴
          <input class="xnum" v-model="navobj.shadowX" />
        </div>
        <div class="xycon">
          y轴
          <input class="ynum" v-model="navobj.shadowY" />
        </div>
        <div class="xycon">
          模糊
          <input class="ynum" v-model="navobj.dim" />
        </div>
      </div>
    </div>

    <div class="nav-con">
      <div class="nav-span">
        <span>图标样式：</span>
      </div>
      <div class="nav-spot">
        <el-radio v-model="navobj.img" label="1">默认</el-radio>
        <el-radio v-model="navobj.img" label="2">自定义</el-radio>
      </div>
    </div>
    <div class="choose-btn" v-show="showImage">
      <div class="choose-btn-img">
        <img :src="nowImage" alt />
      </div>
      <div class="choose-btn-con" @click="showImg = true">
        <div class="nav-span">
          <span>选择图标：</span>
        </div>
      </div>
    </div>
    <div class="nav-con">
      <div class="nav-span">
        <span>跳转：</span>
      </div>
      <input type="text" v-model="navobj.mainKey" class="mainKey" />
      <div class="add-tag">
        <span>选择跳转</span>
      </div>
    </div>
    <UploadImages @closeModel="closeModel" :dialogVisible="showImg"></UploadImages>
  </div>
</template>
<script>
import UploadImages from "@/components/UploadImages/UploadImages";
import { mapGetters } from "vuex";
export default {
  components: { UploadImages },
  data() {
    return {
      showTextSty: false,
      showImage: false,
      showImg: false,
      textSize: "14px",
      shadow: "rgba(76, 187, 154, 1)",
      textStyel: [
        {
          id: 0,
          checkicon: "derline",
          uncheckicon: "un_derline",
          status: false
        },
        {
          id: 1,
          checkicon: "italic_check",
          uncheckicon: "italic_uncheck",
          status: false
        },
        {
          id: 2,
          checkicon: "strong",
          uncheckicon: "un_strong",
          status: false
        },
        {
          id: 3,
          checkicon: "left",
          uncheckicon: "un_left",
          status: false
        },
        {
          id: 4,
          checkicon: "center",
          uncheckicon: "un_center",
          status: false
        },
        {
          id: 5,
          checkicon: "right_qicheck",
          uncheckicon: "unright",
          status: false
        }
      ],
      navobj: {
        sty: "1",
        size: 12,
        color: "rgba(0, 206, 209, 1)",
        mainKey: "",
        img: "1",
        shadowX: "0",
        shadowY: "1",
        dim: "4"
      }
    };
  },
  computed: {
    ...mapGetters(["navData", "ObjCon"]),
    title: {
      get: function() {
        return this.$store.state.nav.NavTitle;
      },
      set: function(val) {
        this.ObjCon.data[this.nowIdx].text = val;
        this.$store.dispatch("nav/setNavAllData", this.ObjCon);
      }
    },
    // 更新数组信息
    nowImage: {
      get: function() {
        return this.$store.state.imgs.imgUrl;
      }
    },
    nowIdx: function() {
      return this.$store.state.nav.NavIdx;
    },
    sizeData: function() {
      var sizeArr = [];
      let n = 0;
      for (let i = 10; i <= 120; n++) {
        if (n <= 4) {
          i = i + 2;
          sizeArr[n] = i + "px";
        } else if (n === 5) {
          i = i + 4;
          sizeArr[n] = i + "px";
        } else if (n > 5 && n <= 9) {
          i = i + 6;
          sizeArr[n] = i + "px";
        } else if (n > 9 && n <= 15) {
          i = i + 12;
          sizeArr[n] = i + "px";
        } else {
          break;
        }
      }
      return sizeArr;
    }
  },
  watch: {
    // 设置文字字号
    textSize: function(val) {
      this.ObjCon.style.fontSize = val;
      this.$store.dispatch("nav/setNavAllData", this.ObjCon);
      return val;
    },
    nowImage: function(val) {
      this.navData[this.nowIdx].img = val;
      this.$store.dispatch("nav/setNavAllData", this.ObjCon);
    },
    // 显示隐藏标题样式
    "navobj.sty": function(val, old) {
      if (val === "1") {
        this.showTextSty = false;
      } else {
        this.showTextSty = true;
      }
    },
    // 显示隐藏图片样式
    "navobj.img": function(val, old) {
      if (val === "1") {
        this.showImage = false;
      } else {
        this.showImage = true;
      }
    },
    // 设置导航背景色
    "navobj.color": function(val) {
      this.ObjCon.style.backgroundColor = val;
      this.$store.dispatch("nav/setNavAllData", this.ObjCon);
      return val;
    },
    "navobj.shadowX": function(val) {
      this.setShadowStyle(
        val,
        this.navobj.shadowY,
        this.navobj.dim,
        this.shadow
      );
      return val;
    },
    "navobj.shadowY": function(val) {
      this.setShadowStyle(
        this.navobj.shadowX,
        val,
        this.navobj.dim,
        this.shadow
      );
      return val;
    },
    "navobj.dim": function(val) {
      this.setShadowStyle(
        this.navobj.shadowX,
        this.navobj.shadowY,
        val,
        this.shadow
      );
      return val;
    },
    // 设置阴影
    shadow: function(val) {
      this.$store.commit("nav/SetNav_NavShadow", val);
      this.setShadowStyle(
        this.navobj.shadowX,
        this.navobj.shadowY,
        this.navobj.dim,
        val
      );
      return val;
    },
    ObjCon: {
      handler(old, newval) {
        this.$store.dispatch("apply/PageJSONUpData");
        this.$emit("updataNowPageJSON", newval);
      },
      deep: true
    }
  },
  mounted() {},
  methods: {
    setTextSize(item) {
      this.textSize = item;
    },
    closeModel() {
      this.showImg = false;
    },
    // 设置阴影样式
    setShadowStyle(x, y, dim, color) {
      this.ObjCon.navImg.boxShadow =
        x + "px " + y + "px " + dim + "px " + color;
      this.$store.dispatch("nav/setNavAllData", this.ObjCon);
    },
    // 设置文字属性及其样式
    setNavStyle(idx) {
      for (const i in this.textStyel) {
        if (i > 2) {
          if (Number(i) === idx) {
            this.textStyel[i].status = true;
            switch (idx) {
              case 3:
                this.ObjCon.style.textAlign = "left";
                break;
              case 4:
                this.ObjCon.style.textAlign = "center";
                break;
              case 5:
                this.ObjCon.style.textAlign = "right";
                break;
              default:
                break;
            }
            this.$store.dispatch("nav/setNavAllData", this.ObjCon);
          } else {
            this.textStyel[i].status = false;
          }
        } else {
          if (Number(i) === idx) {
            this.textStyel[i].status = !this.textStyel[i].status;
            if (this.textStyel[i].status) {
              switch (idx) {
                case 0:
                  this.ObjCon.style.textDecoration = "underline";
                  break;
                case 1:
                  this.ObjCon.style.fontStyle = "italic";
                  break;
                case 2:
                  this.ObjCon.style.fontWeight = "bold";
                  break;
                default:
                  break;
              }
              this.$store.dispatch("nav/setNavAllData", this.ObjCon);
            } else {
              switch (Number(i)) {
                case 0:
                  this.ObjCon.style.textDecoration = "";
                  break;
                case 1:
                  this.ObjCon.style.fontStyle = "";
                  break;
                case 2:
                  this.ObjCon.style.fontWeight = "";
                  break;
                default:
                  break;
              }
              this.$store.dispatch("nav/setNavAllData", this.ObjCon);
            }
          }
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./diyset.scss";
.nav-span {
  width: 70px;
  text-align: right;
}
.nav-all {
  width: 100%;
  height: 100%;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  .nav-con {
    @include flexCon(330px, 50px, center, space-between, 40px);
    position: relative;
    justify-content: left;
    .nav-spot {
      width: 190px;
      margin-left: 7px;
    }
    .xycon {
      display: flex;
      font-size: 14px;
      margin-left: 10px;
      align-items: center;
      .xnum,
      .ynum {
        width: 30px;
        height: 30px;
        font-size: 12px;
        color: #353535;
        text-align: center;
        margin-left: 6px;
      }
    }
    input {
      @include wd(225px, 30px);
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      font-size: 14px;
      padding-left: 8px;
      margin-left: 5px;
      border: 1px solid rgba(223, 223, 223, 1);
    }
    .mainKey {
      width: 150px;
      height: 30px;
      border-radius: 2px;
      border: 1px solid rgba(224, 225, 232, 1);
    }
    .add-tag {
      @include wd(auto, 30px);
      margin-left: 10px;
      border-radius: 2px;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      padding: 0 10px;
      border: 1px solid rgba(224, 225, 232, 1);
      cursor: pointer;
    }
  }
  .choose-btn {
    width: 40%;
    height: 50px;
    display: flex;
    margin-left: 31%;
    align-items: center;
    justify-content: space-between;
    .choose-btn-img {
      width: 44px;
      height: 44px;
      border-radius: 3px;
      overflow: hidden;
      background: rgba(214, 235, 255, 1);
      img {
        width: 100%;
        height: 100%;
      }
    }
    .choose-btn-con {
      width: 80px;
      height: 30px;
      border-radius: 2px;
      background: #e0e1e8;
      color: #353535;
      font-size: 12px;
      text-align: center;
      line-height: 30px;
      border: 1px solid rgba(224, 225, 232, 1);
      cursor: pointer;
    }
  }
  .nav-con-size {
    @include flexCon(290px, 50px, center, space-between, 40px);
    justify-content: left;
    .mycolor {
      margin-left: 20px;
    }
    .text-icon {
      width: auto;
      font-size: 20px;
      svg {
        margin-left: 8px;
      }
    }
    .set-opaq {
      @include wd(90px, 30px);
      margin-left: 7px;
      border-radius: 3px;
      line-height: 30px;
      padding-left: 14px;
      display: flex;
      border: 1px solid rgba(223, 223, 223, 1);
      align-items: center;
      .set-opaq-right {
        @include wd(28px, 28px);
        display: flex;
        align-items: center;
        margin-left: 24px;
      }
    }
    .upimg {
      margin-left: 18px;
    }
  }
}
</style>
